{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>{% block title %}基础{% endblock %}</title>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="{% static 'css/reset.css' %}" rel="stylesheet">
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <style>
        #cart-add {
            opacity: 0;
            background: #f44336;
            animation-timing-function: cubic-bezier(0.6, 0.18, 1, 1);
        }

    </style>

    {% block css %}
    {% endblock %}
</head>
<body>
{#导航#}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="nav nav-pills navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link {% block index %}{% endblock %}" href="{% url 'store:index' %}">首页</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link {% block cart %}{% endblock %} position-relative" href="{% url 'cart:index' %}" aria-current="page">
                        购物车
                        <span id="cart-add"
                              class="position-absolute top-0 start-100 translate-middle badge rounded-pill">
                            +
                        </span>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link {% block buhuo %}{% endblock %}" aria-current="page" href="{% url "store:buhuo" %}">补货</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% block search_ticket %}{% endblock %}" aria-current="page" href="{% url 'store:ticket_list' %}">查单子</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% block  amount %}{% endblock %}" aria-current="page" href="{% url 'store:month_amount' %}">一个月总额</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" aria-current="page" href="{% url 'admin:index' %}">后台</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" aria-current="page" target="_blank" href="https://blog.csdn.net/lalalheinan/article/details/123087167">帮助</a>
                </li>

            </ul>
            <form class="d-flex" role="search" method="post" action="{% url 'store:search' %}">
                {% csrf_token %}
                <input name="good_name" required class="form-control me-2" type="search" placeholder="商品名" aria-label="Search">
                <button class="btn btn-outline-success" type="submit" style="width: 80px;">搜索</button>
            </form>
        </div>
    </div>
</nav>
{% block content %}{% endblock %}

<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
{% block js %}{% endblock %}
</body>
</html>